<template>
	<view>
		<view class="header">
			<view id="back" v-if="back">
				<u-icon name="arrow-left" @click="clickBack" size="60rpx"></u-icon>
			</view>
			<text id="title">修改密码</text>
			<u-button id="button" text="确认" @click="confirm" :disabled="btnDisabled" plain></u-button>
		</view>
		<view style="height: 420rpx;">
			<view style="position: relative;">
				<text class="tip">原密码</text>
				<u--input fontSize="36" class="input" @change="onInputPwd" maxlength="20" :value="pwd" border="bottom"
					password clearable color="black"></u--input>
			</view>
			<view style="position: relative; top: 140rpx;">
				<text class="tip">新密码</text>
				<u--input fontSize="36" class="input" @change="onInputNewPwd" maxlength="20" :value="newPwd"
					border="bottom" password clearable color="black"></u--input>
			</view>
			<view style="position: relative; top: 280rpx;">
				<text class="tip">确认密码</text>
				<u--input fontSize="36" class="input" @change="onInputConfirmPwd" maxlength="20" :value="confirmPwd"
					border="bottom" password clearable color="black"></u--input>
			</view>
		</view>
		<view :v-if="tip">
			<text id="wrong">{{tip}}</text>
		</view>
	</view>
</template>

<script>
	var _this = null;
	const api = require('api.js');
	const crypt = require('crypt.js');
	export default {
		data() {
			return {
				back: false,
				btnDisabled: true,
				pwd: '',
				newPwd: '',
				confirmPwd: '',
				tip: ''
			}
		},
		methods: {
			clickBack: function(e) {
				var pages = getCurrentPages();
				if (pages.length > 1) {
					uni.navigateBack({
						url: pages[pages.length - 2].url
					})
				}
			},
			onInputPwd: function(e) {
				_this.pwd = e;
				_this.checkPwd();
			},
			onInputNewPwd: function(e) {
				_this.newPwd = e;
				_this.checkPwd();
			},
			onInputConfirmPwd: function(e) {
				_this.confirmPwd = e;
				_this.checkPwd();
			},
			checkPwd: function() {
				var tipV = _this.checkPwdLength(_this.pwd, '原密码');
				if (tipV) {
					_this.tip = tipV;
					_this.btnDisabled = true;
					return;
				}
				tipV = _this.checkPwdLength(_this.pwd, '新密码');
				if (tipV) {
					_this.tip = tipV;
					_this.btnDisabled = true;
					return;
				}
				if (_this.pwd == _this.newPwd) {
					_this.tip = '新密码与原密码一致';
					_this.btnDisabled = true;
					return;
				}
				if (_this.newPwd != _this.confirmPwd) {
					_this.tip = '新密码与确认密码不一致';
					_this.btnDisabled = true;
					return;
				}
				_this.tip = '';
				_this.btnDisabled = false;
			},
			checkPwdLength: function(e, type) {
				return e.length >= 5 && e.length <= 20 ? '' : type + '长度为5-20之间'
			},
			confirm: function() {
				_this.btnDisabled = true;
				api.postSync('/api/user/changePassword', {
					'password': crypt.encrypt(_this.pwd),
					'newPassword': crypt.encrypt(_this.newPwd)
				}, (res) => {
					if (res.code != 200) {
						uni.showToast({
							icon: 'error',
							title: res.msg,
							duration: 2000
						});
						_this.btnDisabled = false;
						return;
					}
					var pages = getCurrentPages();
					if (pages.length > 1) {
						var lastPage = pages[pages.length - 2];
						uni.navigateBack({
							url: lastPage.url
						})
					}
					setTimeout(() => {
						uni.showToast({
							icon: 'success',
							title: '修改成功',
							duration: 2000
						});
					}, 200);
				}, (err) => {
					_this.btnDisabled = false;
				});
			}
		},
		onLoad() {
			_this = this;
			_this.back = getCurrentPages().length > 1;
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		height: calc(var(--status-bar-height) + 96rpx);
		position: relative;

		#back {
			position: absolute;
			padding-top: calc(var(--status-bar-height) + 18rpx);
			padding-left: 12rpx;
			z-index: 99;
		}

		#title {
			position: absolute;
			left: 320rpx;
			top: calc(var(--status-bar-height) + 22rpx);
			font-weight: 1000;
			font-family: 'YouYuan';
			font-size: 36rpx;
		}

		#button {
			position: absolute;
			background: #3d5cff;
			width: 120rpx;
			top: calc(var(--status-bar-height) + 12rpx);
			right: 12rpx;
			height: 70rpx;
			border-radius: 18rpx;
			color: white;
		}
	}

	.tip {
		position: absolute;
		color: #b8b8d2;
		font-size: 28rpx;
		top: 10rpx;
		left: 24rpx;
	}

	.input {
		position: absolute;
		width: 670rpx;
		left: 20rpx;
		top: 40rpx;
	}
	
	#wrong {
		font-size: 32rpx;
		margin-top: 12rpx;
		margin-left: 24rpx;
		font-weight: 800;
		color: red;
	}
</style>
